<template>
  <div>
    <div class="analy-item-title">视频解析</div>
    <div v-if="ifHasAtLeastTwoVideos" class="teacher-list m-t-10 flex-wrap">
      <div
        v-for="(item, index) in videos"
        :key="index"
        class="teacher"
        :class="{ 'active-teacher': +activeTeacherIndex === +index }"
        @click="activeTeacherIndex = index"
      >
        {{ item.teacher_name }}
      </div>
    </div>
    <div class="common-player-cont" @click="openVideoDialog">
      <img
        @click.stop="openVideoDialog"
        class="common-player-cont-icon cu"
        src="//image.zlketang.com/public/news/css/img/bigplay.png"
        alt=""
      />
    </div>

    <!-- 视频解析 -->
    <el-dialog
      v-if="showVideoDailog"
      class="play-dailog"
      title="视频解析"
      :visible.sync="showVideoDailog"
      @close="closeVideo"
      append-to-body
    >
      <div v-if="ifHasAtLeastTwoVideos" class="teacher-list m-t-10 flex-wrap">
        <div
          v-for="(item, index) in videos"
          :key="index"
          class="teacher dialog-teacher"
          :class="{
            'active-dialog-teacher active-teacher':
              +activeTeacherIndex === +index
          }"
          @click="teacherInWinChange(index)"
        >
          {{ item.teacher_name }}
        </div>
      </div>
      <zl-video
        ref="videoBox"
        :autoplay="false"
        :current-time-play="curVideoProgress"
        @timeupdate="videoTimeupdate"
        :play-options="playingSection"
        @fullScreenChange="fullScreenChange"
        class="h-414 zl-video"
        :class="ifHasAtLeastTwoVideos ? 'mt20' : 'mt-unset'"
      ></zl-video>

      <!-- 评价部分 -->
      <div class="avaluate-box flex-wrap mt20 flex-justify-center">
        <div
          class="has-help btn-box"
          :class="{ 'active-btn': ifHasHelp }"
          @click="helpEvaluateClick('has')"
        >
          <span class="icon"></span>
          有帮助
        </div>
        <div
          class="no-help btn-box ml20"
          :class="{ 'active-btn': ifNoHelp }"
          @click="helpEvaluateClick('no')"
        >
          <span class="icon"></span>
          无帮助
        </div>
        <div class="active-btn ta-center btn-box ml20" @click="openEvaluateWin">
          {{ alreadyHasScore ? '查看评价' : '评价' }}
        </div>
      </div>
    </el-dialog>

    <!-- 评价弹窗 -->
    <el-dialog
      v-if="showEvaluateDialog"
      class="evaluate-dailog"
      :title="alreadyHasScore ? '查看评价' : '本视频评价'"
      :visible.sync="showEvaluateDialog"
      @close="closeEvaluateDialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="text-1">老师讲得怎么样？</div>
      <div class="text-2 mt10 ">
        以该视频对您的帮助为打分标准，1-10分，您打几分？
      </div>
      <div class="flex-wrap flex-justify-between mt20">
        <div
          class="score-box"
          :class="{
            'active-score-box': activeScore === i,
            'already-score-box': activeScore === i && alreadyHasScore
          }"
          v-for="i in 10"
          :key="i"
          @click="clickScore(i)"
        >
          {{ i }}
        </div>
      </div>
      <div class="score-to-text mt10 ">{{ thisScoreText }}</div>
      <el-input
        type="textarea"
        resize="none"
        class="mt20 evaluate-text"
        placeholder="评价是为了提高老师讲解题目的质量，不对外不进行展示，感谢您的反馈!"
        v-model="evaluateText"
        :disabled="alreadyHasScore"
      ></el-input>

      <div
        v-if="!alreadyHasScore"
        class="commit-evaluate-btn"
        :class="{ 'commit-evaluate-btn-able': activeScore !== undefined }"
        @click="commitEvaluate"
      >
        提交
      </div>
    </el-dialog>
  </div>
</template>

<script>
import player from '@/components/play/player.vue'
import { uploadQuestionEvaluate, getQuestionEvaluate } from '@/api/exam.js'
import '@/store/modules/exam.js'
export default {
  name: 'videoAnalysis',
  components: {
    'zl-video': player
  },
  data() {
    return {
      showVideoDailog: false,
      // 当前选中视频
      playingSection: {},
      // 当前选中的老师index
      activeTeacherIndex: 0,
      // 是否选中有帮助
      ifHasHelp: false,
      // 是否选中无帮助
      ifNoHelp: false,
      // 评价弹窗
      showEvaluateDialog: false,
      // 选中的分数
      activeScore: undefined,
      // 用户输入的评价文本
      evaluateText: '',
      // 选择分数对应的文案
      scoreToText: {
        '1,2,3': '没有帮助',
        '4,5,6': '有点帮助',
        '7,8': '很有帮助',
        '9,10': '非常有帮助'
      },
      ifFullScreen: undefined,
      showvideoQuestionWin: false,
      alreadyEvaluateList: [], // 已评论的数据
      alreadyHasScore: false,
      videoPlayedTime: []
    }
  },
  props: ['mockQuestionData','comQuestionInd'],
  computed: {
    // 题目数据
    questionData() {
      console.log('this.mockQuestionData',this.mockQuestionData);
      return this.$store.state?.exam?.currentQuestion || this.mockQuestionData
    },
    // 解析视频数据
    videos() {
      let hasVideos =
        Array.isArray(this.questionData.videos) &&
        this.questionData.videos.length
      return hasVideos ? this.questionData.videos : []
    },
    // 是否有至少两条解析视频
    ifHasAtLeastTwoVideos() {
      return Array.isArray(this.videos) && this.videos.length > 1
    },
    // 激活的老师id
    activeTeacherId() {
      return this.videos[Number(this.activeTeacherIndex)].teacher_id || ''
    },
    // 评价分数对应的文案
    thisScoreText() {
      let str = ''
      Object.keys(this.scoreToText).find(key => {
        let arr = key.split(',')
        if (arr.includes(String(this.activeScore))) {
          return (str = this.scoreToText[key])
        }
      })
      return str
    },
    // 当前老师视频的已保存进度
    curVideoProgress() {
      let obj = this.videoPlayedTime.find(ele => {
        return +ele.teacher_id === +this.activeTeacherId
      })
      return (obj && obj.lastPlayedTime) || 0
    },
    combinationQuestionIndex() {
      // 提交评价事件
      if(isNaN(this.comQuestionInd)) {
        return 0
      }else {
        return Number(this.comQuestionInd) + 1
      }
    },
    examId() {
      console.log(this.getQuery(location.search));
      return this.$store?.state?.exam?.examId || this.getQuery(location.search).exam_id || this.questionData.exam_id
    }
  },
  methods: {
    // 打开播放器
    openVideoDialog() {
      let playUrl =
        (Array.isArray(this.videos) &&
          this.videos.length &&
          this.videos[this.activeTeacherIndex].url) ||
        ''
      this.playVideo(playUrl)
    },
    // 是否全屏状态变更
    fullScreenChange() {
      this.ifFullScreen = document.fullscreenElement
      if (this.ifFullScreen) {
        // 全屏时展示按钮及弹窗及绑定点击事件
        $('.vjs-custom-control-spacer.vjs-spacer').append(
          `<div class="question-btn-in-video">题目</div>`
        )
        $('.question-btn-in-video')
          .off('click')
          .on('click', () => {
            // 切换展示隐藏题目解析
            this.switchShowQuestionInVideo()
          })
      } else {
        // 退出全屏时移除按钮及弹窗及解绑点击事件
        this.showvideoQuestionWin = false
        $('.question-btn-in-video').off('click')
        $('.tcplayer .close-btn').off('click')
        $('.tcplayer .video-question-win').remove()
        $('.tcplayer .question-btn-in-video').remove()
      }
    },
    // 切换展示隐藏题目解析
    switchShowQuestionInVideo() {
      this.showvideoQuestionWin = !this.showvideoQuestionWin
      let {
        title,
        index,
        description,
        options,
        answer,
        solution,
        type
      } = this.questionData
      if (this.showvideoQuestionWin) {
        console.log('options', options)
        let answerStr = ``
        // 组合题
        if (+type === 3) {
          Object.keys(options).forEach(key => {
            answerStr += `<div class="com-question-body"">${Number(key) +
              1 +
              '、' +
              options[key]['description']}</div>`
          })
        } else if (+type === 4) {
          // 简答题
        } else {
          Object.keys(options).forEach(key => {
            let classStr = ''
            classStr = answer.includes(key)
              ? 'question-option question-option-active'
              : 'question-option'
            answerStr += `<div class="${classStr}"">${key +
              '、' +
              options[key]}</div>`
          })
        }

        let rightAnswer = [3, 4].includes(+type)
          ? `<span class="right-answer-no">见下方答案解析</span>`
          : `<div class="right-answer">${answer.join('、')}</div>`
        $('.tcplayer').append(
          `<div class="video-question-win">
             <div class="close-btn"></div>
             <div class="question-type mt32">${title}</div>
             <div class="question-name mt16">${index +
               '、' +
               description +
               '。'}</div>
             <div class="question-options mt24">${answerStr}</div>
             <div class="split-line mt16"></div>
             <div class="mt16"><span class="right-answer-label">正确答案：</span>` +
            rightAnswer +
            `</div>
             <div class="answer-analysis-label mt16">答案解析</div>
             <div class="answer-analysis mt8">${solution}</div>
           </div>`
        )
        $('.tcplayer .video-question-win').css('opacity', '1')
        $('.tcplayer .close-btn')
          .off('click')
          .on('click', () => {
            this.showvideoQuestionWin = false
            $('.tcplayer .video-question-win').remove()
          })
      } else {
        $('.tcplayer .close-btn').off('click')
        $('.tcplayer .video-question-win').remove()
      }
    },
    // 播放视频
    playVideo(videoUrl) {
      if (!videoUrl) return this.$message.warning('视频解析失败')

      this.playingSection.hls = videoUrl
      console.log('this.$refs.videoBox',this.$refs.videoBox);

      if (this.$refs.videoBox) this.$refs.videoBox.preparePlayer()
      this.showVideoDailog = true
      this.$nextTick(() => {
        // 上报观看视频接口

        this.uploadQuestionEvaluate('2')
        // 获取此老师此视频的已有评价
        this.getQuestionEvaluate()
      })
    },
    // 播放进度
    videoTimeupdate(time) {},
    // 关闭播放器
    closeVideo() {
      this.showVideoDailog = false
      if (this.$refs.videoBox && this.$refs.videoBox.player) {
        this.$refs.videoBox.player.dispose()
        this.$refs.videoBox.player = false
      }
    },
    // 打开评价弹窗
    openEvaluateWin() {
      this.$refs.videoBox.player.pause()
      this.showEvaluateDialog = true
      // 此老师未评价 清空分数和评价文案
      if (!this.alreadyHasScore) {
        this.activeScore = undefined
        this.evaluateText = ''
      }
    },
    // 关闭评价弹窗
    closeEvaluateDialog() {
      this.showEvaluateDialog = false
      this.$refs.videoBox.player.play()
    },
    // 点击某分数
    clickScore(score) {
      if (this.alreadyHasScore) return
      // 点击已选中的分数
      if (+this.activeScore === score) {
        this.activeScore = undefined
      } else {
        // 点击未选中的分数
        this.activeScore = score
      }
    },
    // 提交评价
    commitEvaluate() {
      if (!this.activeScore) return
      this.uploadQuestionEvaluate('3')
      this.closeEvaluateDialog()
    },
    // 弹窗内老师切换
    teacherInWinChange(index) {
      this.updateCurTeacherVideoNewestTime(
        this.$refs.videoBox.player.currentTime()
      )

      if (+index === +this.activeTeacherIndex) return
      // 清除视频 重新加载选中老师的视频
      this.activeTeacherIndex = index

      if (this.$refs.videoBox && this.$refs.videoBox.player) {
        this.$refs.videoBox.player.dispose()
        this.$refs.videoBox.player = false
      }
      this.openVideoDialog()
    },
    // 有帮助无帮助的按钮点击
    helpEvaluateClick(from) {
      if (from === 'has') {
        this.ifHasHelp = !this.ifHasHelp
        this.ifHasHelp && (this.ifNoHelp = false)
      } else {
        this.ifNoHelp = !this.ifNoHelp
        this.ifNoHelp && (this.ifHasHelp = false)
      }
      this.uploadQuestionEvaluate('1')
    },
    // 获取已有评价
    getQuestionEvaluate() {
      getQuestionEvaluate({
        exam_id: this.examId,
        question_id: this.questionData.question_id
      }).then(res => {
        this.alreadyEvaluateList = res.data.evaluate_list
        this.handleCurTeacherEvaluate()
      })
    },
    // 处理当前老师的评价数据
    handleCurTeacherEvaluate() {
      let obj = this.alreadyEvaluateList.find(ele => {
        return +ele.teacher_id === +this.activeTeacherId
      })
      if (obj) {
        // 分数和评价文本
        if (obj && obj.evaluate_score) {
          // 评价过分数 分数和评价文本都不可编辑
          this.activeScore = Number(obj.evaluate_score)
          this.alreadyHasScore = true
          this.evaluateText = obj.evaluate_content
        } else {
          this.alreadyHasScore = false
        }
        // 有帮助无帮助
        switch (+obj.evaluate_type) {
          case 0:
            this.ifHasHelp = false
            this.ifNoHelp = false
            break
          case 1:
            this.ifHasHelp = true
            this.ifNoHelp = false
            break
          case 2:
            this.ifHasHelp = false
            this.ifNoHelp = true
            break
          default:
            this.ifHasHelp = false
            this.ifNoHelp = false
            break
        }
      }
    },
    // 调取上传评价接口
    uploadQuestionEvaluate(from) {
      console.log('this.questionData', this.questionData)
      let { question_id, type,indexId } = this.questionData
      let { activeScore, evaluateText, ifHasHelp, ifNoHelp } = this
      let activeTeacher = this.videos[this.activeTeacherIndex]
      let evaluate_type = ifHasHelp ? '1' : ifNoHelp ? '2' : '0'

      uploadQuestionEvaluate({
        type: from,
        question_id: question_id,
        exam_id: this.examId,
        evaluate_type,
        evaluate_score: activeScore,
        evaluate_content: evaluateText,
        teacher_id: activeTeacher.teacher_id,
        teacher_name: activeTeacher.teacher_name,
        video_name: activeTeacher.video_name,
        question_index: +type === 3 ? this.combinationQuestionIndex : '0' // 第几个小题 分为组合题和非组合题的情况
      }).then(res => {
        if (['3'].includes(from)) {
          this.$message.success('评价成功')
        }
        this.getQuestionEvaluate()
      }).catch(error=>{
        console.log(error);
      })
    },
    // 更新当前老师视频的最新播放进度
    updateCurTeacherVideoNewestTime(newestTime) {
      let obj = this.videoPlayedTime.find(ele => {
        return +ele.teacher_id === +this.activeTeacherId
      })
      obj && (obj.lastPlayedTime = newestTime)
      console.log(this.videoPlayedTime)
    }
  },
  mounted() {
    this.questionData.videos.forEach(ele => {
      this.videoPlayedTime.push({
        teacher_id: ele.teacher_id,
        lastPlayedTime: 0
      })
    })
  }
}
</script>

<style scoped>
.zl-video {
  margin-top: 20px;
}

.play-dailog /deep/ .el-dialog {
  width: 772px;
}

.play-dailog /deep/ .el-dialog__close {
  color: #d9d9d9;
  font-size: 20px;
}

.play-dailog /deep/ .el-dialog__header {
  padding: 20px;
  text-align: center;
}

.play-dailog /deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold;
  color: #383838;
  line-height: 28px;
}

.play-dailog /deep/ .el-dialog__body {
  padding: 0px;
  border-radius: 0px 0px 12px 12px;
  overflow: hidden;
}

.play-dailog /deep/ .el-dialog,
.play-end-dailog /deep/ .el-dialog {
  border-radius: 12px;
}

.play-dailog /deep/ .pause-bg {
  background: transparent;
}

.play-dailog /deep/ .video-container .playerCont-dimensions {
  border-radius: 12px;
}

.play-dailog /deep/ .video-js .vjs-control-bar {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.play-dailog /deep/ .video-js .vjs-tech {
  border-radius: 12px;
}

.teacher-list .teacher:not(:first-child) {
  margin-left: 12px;
}

.teacher {
  width: 64px;
  height: 28px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #999999;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #383838;
  line-height: 26px;
  cursor: pointer;
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-teacher {
  background: #eff8ff;
  border: 1px solid #3480ff;
  color: #3480ff;
}

.teacher-list .dialog-teacher:not(:first-child) {
  margin-left: 20px;
}

.dialog-teacher {
  width: 70px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 4px;
  border: unset;
  font-size: 14px;
  line-height: 36px;
}

.active-dialog-teacher {
  background: #f5f9ff;
  border: 1px solid #b3cfff;
  color: #3480ff;
}

.common-player-cont {
  margin-top: 10px;
  float: unset !important;
  position: relative;
  width: 178px;
  height: 101px;
  border-radius: 8px;
  background: url(//image.zlketang.com/public/news/images/guanwangPic/answer-video-cover.png)
    center center no-repeat;
  background-size: 130% 130%;
}

.common-player-cont::before {
  content: '';
  position: absolute;
  border-radius: 8px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明颜色 */
  z-index: 1;
}

.common-player-cont-icon {
  width: 30px;
  height: 30px;
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.play-dailog /deep/ .el-dialog__header {
  text-align: left;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303133;
  line-height: 16px;
}

.play-dailog /deep/ .el-dialog__body {
  padding: 0 16px 20px 16px;
}

.h-414 {
  height: 414px !important;
}

.btn-box {
  width: 104px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #d9d9d9;

  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #8c8c8c;
  line-height: 34px;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.active-btn {
  font-weight: 500;
  color: #3480ff;
  border: 1px solid #3380ff;
}

.no-help.active-btn {
  /* css-ignore */
  border: 1px solid #ff5438;
  color: #ff5338;
}

.ta-center {
  text-align: center;
}

.has-help,
.no-help {
  /* css-ignore */
  text-indent: 41px;
}

.has-help .icon,
.no-help .icon {
  /* css-ignore */
  width: 24px;
  height: 24px;
  position: absolute;
  left: 15px;
  top: 4px;
}

.has-help .icon {
  /* css-ignore */
  background: url(//image.zlketang.com/public/news/video_analysis/has_help_normal.png)
    center center no-repeat;
  background-size: 100% 100%;
}

.no-help .icon {
  /* css-ignore */
  background: url(//image.zlketang.com/public/news/video_analysis/no_help_normal.png)
    center center no-repeat;
  background-size: 100% 100%;
}

.has-help.active-btn .icon {
  /* css-ignore */
  background: url(//image.zlketang.com/public/news/video_analysis/has_help_active.png)
    center center no-repeat;
  background-size: 100% 100%;
}

.no-help.active-btn .icon {
  /* css-ignore */
  background: url(//image.zlketang.com/public/news/video_analysis/no_help_active.png)
    center center no-repeat;
  background-size: 100% 100%;
}

.evaluate-dailog /deep/ .el-dialog {
  width: 550px;
  border-radius: 12px;
  margin-top: unset !important;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.evaluate-dailog /deep/ .el-dialog__header {
  text-align: center;
  font-weight: bold;
}

.evaluate-dailog /deep/ .el-dialog__body {
  padding-top: 10px !important;
  padding-bottom: 20px !important;
}

.text-1 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #383838;
  line-height: 22px;
}

.text-2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}

.score-box {
  width: 40px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #383838;
  line-height: 50px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.commit-evaluate-btn {
  width: 86px;
  height: 32px;
  background: #d9d9d9;
  border-radius: 18px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 32px;
  margin: 20px auto 0 auto;
  cursor: pointer;
}

.active-score-box {
  background: #3480ff;
  color: #ffffff;
}
.already-score-box {
  background: #add3ff;
  color: #ffffff;
}
.commit-evaluate-btn-able {
  color: #ffffff;
  background: #3480ff;
}
.play-dailog /deep/ .el-dialog {
  margin-top: unset !important;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.evaluate-text /deep/ .el-textarea__inner {
  height: 132px;

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #383838;
  line-height: 20px;
  border-radius: 8px;
}
.evaluate-text.is-disabled /deep/ .el-textarea__inner {
  background-color: #fff !important;
}
.score-to-text {
  text-align: center;
  height: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3480ff;
  line-height: 16px;
}

.play-dailog /deep/ .question-btn-in-video {
  text-align: right;
  cursor: pointer;
  margin-top: -17px;
  margin-right: 30px;
}

.play-dailog /deep/ .video-question-win {
  height: calc(100vh - 4.5em);
  overflow-y: scroll;
  overflow-x: hidden;
  width: 375px;
  right: 0;
  top: 0;
  position: absolute;
  background: #212121;
}

.play-dailog /deep/ .video-question-win {
  padding: 20px;
  transition: all 500ms linear;
}

.play-dailog /deep/ .video-question-win .close-btn {
  width: 20px;
  height: 20px;
  position: relative;
  float: right;
  background: url(//image.zlketang.com/public/news/video_analysis/close_btn.png)
    center center no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.play-dailog /deep/ .video-question-win .question-type {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #f0f0f0;
  line-height: 22px;
  margin-top: 12px;
}

.play-dailog /deep/ .video-question-win .question-name {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  margin-top: 16px;
}

.play-dailog
  /deep/
  .video-question-win
  .question-options
  .question-option:not(:first-child) {
  margin-top: 8px;
}

.play-dailog /deep/ .video-question-win .question-option {
  width: 335px;
  border-radius: 6px;
  border: 1px solid #595959;
  padding: 13px 16px;

  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}
.mt-unset {
  margin-top: unset !important;
}

.play-dailog /deep/ .video-question-win .question-option-active {
  background: #595959;
  border: unset !important;
  color: #00b085;
}
.play-dailog /deep/ .video-question-win .com-question-body {
  font-size: 16px;
  line-height: 22px;
}
.play-dailog
  /deep/
  .vjs-has-started.vjs-user-inactive.vjs-playing
  .video-question-win {
  height: calc(100vh);
}

.play-dailog /deep/ .vjs-has-started .video-question-win {
  height: calc(100vh - 4.5em);
}

.play-dailog /deep/ .video-question-win .split-line {
  width: 375px;
  height: 10px;
  background: #1a1a1a;
  margin-left: -20px;
}

.play-dailog /deep/ .video-question-win .right-answer-label {
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 22px;
}

.play-dailog /deep/ .video-question-win .right-answer {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #00b085;
  line-height: 22px;
}
.play-dailog /deep/ .video-question-win .right-answer-no {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #bfbfbf;
  line-height: 20px;
}
.play-dailog /deep/ .video-question-win .answer-analysis-label {
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 22px;
}

.play-dailog /deep/ .video-question-win .answer-analysis {
  width: 100%;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  word-break: break-all;
}
.analy-item-title {
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  color: #212429;
  line-height: 22px;
  position: relative;
  padding-left: 12px;
}
.analy-item-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #3480ff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* Object.keys(options).forEach(key=>{
          let classStr = ''
          classStr = answer.includes(key)?'question-option question-option-active':'question-option'
          answerStr+= `<div class=${classStr}>${key+'、'+options[key]}</div>`
        })
        $(".tcplayer").append(
          `<div class="video-question-win">
             <div class="close-btn"></div>
             <div class="question-type">${title}</div>
             <div class="question-name">${index + '、' + description + '(  )。'}</div>
             ${answerStr}
             <div><span class="right-answer-label">正确答案：</span><span class="right-answer">${answer.join('、')}</span></div>
             <div class="answer-analysis-label">答案解析</div>
             <div class="answer-analysis">${solution}</div>
           </>`
        ) */
</style>
